<style lang="scss" scoped>
.container {
  padding: 0 16px;
}

.el-select .el-select--small {
  display: block !important;
}
.el-card {
  height: 465px !important;
  padding: 20px !important;
}
.title {
  display: block;
  margin: 20px 0px;
  font-size: 18px;
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
.el-table__body-wrapper .is-scrolling-none {
  height: 335px !important;
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 主体区 -->
    <div class="container">
      <span class="title">MCA明细</span>
      <el-card class="card" shadow="hover">
        <div class="grid-data-box" style="width: 100%">
          <div
            class="detailTitle fxrow"
            style="
              overflow: hidden;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <div class="fxrow fxsc" style="flex: 1">
              <table>
                <tr>
                  <td>
                    <i class="el-icon-search"></i>
                  </td>
                  <td class="search_td" style="width: 190px">
                    <el-select
                      clearable
                      class="handle-input mr10"
                      style="width: 190px"
                      v-model="parampters.status"
                      placeholder="状态"
                    >
                      <el-option
                        v-for="item in dicts.dictionary.mcaList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </td>
                </tr>
              </table>
            </div>
            <div>
              <el-button size="small" type="primary" @click="initFormData()"
                >查询</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              :data="tableData"
              max-height="335"
              border
              stripe
              style="width: 100%"
              ref="singleTable"
              highlight-current-row
              @row-dblclick="clickToView"
              :cell-style="{ padding: '3px 0 !important' }"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <template v-for="(column, i) in columnData">
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  :width="column.columnCode == 'updateTime' ? '150' : 'auto'"
                  v-if="column.visiable == '1' || column.visiable == 1"
                  :label="column.columnName"
                  show-overflow-tooltip
                ></el-table-column>
              </template>
            </el-table>
            <div class="navigate-box">
              <div class="pagination">
                <el-pagination
                  background
                  @current-change="
                    (val) => {
                      this.handleCurrentChange(val, 'mca');
                    }
                  "
                  :total="parampters.totalCount"
                  @size-change="
                    (val) => {
                      this.handleSizeChange(val, 'mca');
                    }
                  "
                  :current-page.sync="parampters.pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="parampters.pageRows"
                  layout="total, sizes, prev, pager, next"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <span class="title">手机号进度查询</span>
      <el-card class="card" shadow="hover">
        <div class="grid-data-box" style="width: 100%">
          <div
            class="detailTitle fxrow"
            style="
              overflow: hidden;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <div class="fxrow fxsc" style="flex: 1">
              <table>
                <tr>
                  <td>
                    <i class="el-icon-search"></i>
                  </td>
                  <td class="search_td" style="width: 190px">
                    <el-select
                      clearable
                      class="handle-input mr10"
                      style="width: 190px"
                      v-model="batchMobile.status"
                      placeholder="状态"
                    >
                      <el-option
                        v-for="item in dicts.dictionary.produceMissionStatus"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </td>
                </tr>
              </table>
            </div>
            <div>
              <el-button size="small" type="primary" @click="loadmobileList()"
                >查询</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              :data="batchMobileTableData"
              max-height="335"
              border
              stripe
              style="width: 100%"
              ref="singleTable"
              highlight-current-row
              @row-dblclick="clickToView"
              :cell-style="{ padding: '3px 0 !important' }"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <template v-for="(column, i) in batchMobilecolunmnData">
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  :width="column.columnCode == 'updateTime' ? '150' : 'auto'"
                  v-if="column.visiable == '1' || column.visiable == 1"
                  :label="column.columnName"
                  show-overflow-tooltip
                ></el-table-column>
              </template>
            </el-table>
            <div class="navigate-box">
              <div class="pagination">
                <el-pagination
                  background
                  @current-change="
                    (val) => {
                      this.handleCurrentChange(val, 'batchMobileList');
                    }
                  "
                  :total="batchMobile.totalCount"
                  @size-change="
                    (val) => {
                      this.handleSizeChange(val, 'batchMobileList');
                    }
                  "
                  :current-page.sync="batchMobile.pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="batchMobile.pageRows"
                  layout="total, sizes, prev, pager, next"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <span class="title">文件明细</span>
      <el-card class="card" shadow="hover">
        <div class="grid-data-box" style="width: 100%">
          <div
            class="detailTitle fxrow"
            style="
              overflow: hidden;
              justify-content: space-between;
              margin-bottom: 5px;
            "
          >
            <div class="fxrow fxsc" style="flex: 1">
              <table>
                <tr>
                  <td>
                    <i class="el-icon-search"></i>
                  </td>
                  <td class="search_td" style="width: 190px">
                    <el-select
                      clearable
                      class="handle-input mr10"
                      style="width: 190px"
                      v-model="operatePrams.fileType"
                      placeholder="文件类型"
                    >
                      <el-option
                        v-for="item in operateFileTypeList"
                        :key="item.fileType"
                        :label="item.fileTypeName"
                        :value="item.fileType"
                      ></el-option>
                    </el-select>
                  </td>
                </tr>
              </table>
            </div>
            <div>
              <el-button size="small" type="primary" @click="importMobile()"
                >导入手机号文件</el-button
              >
              <el-button size="small" type="primary" @click="loadOperateFile()"
                >查询</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              :data="operateFileTableData"
              max-height="335"
              border
              stripe
              style="width: 100%"
              ref="singleTable"
              highlight-current-row
              @row-dblclick="clickToView"
              :cell-style="{ padding: '3px 0 !important' }"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <template v-for="(column, i) in operateColunmnData">
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  width="700"
                  v-if="column.columnCode == 'fileName'"
                  :label="column.columnName"
                  show-overflow-tooltip
                >
                  <template
                    slot-scope="scope"
                    v-if="column.columnCode == 'fileName'"
                  >
                    <div
                      class="fxrow fxcc"
                      style="display: flex; justify-content: space-between"
                    >
                      <span
                        slot="reference"
                        style=""
                        >{{ scope.row.fileName }}</span
                      >
                      <a
                        :href="scope.row.fileUrl"
                        :download="scope.row.fileName"
                      >
                        <i
                          class="el-icon-download"
                          style="cursor: pointer; font-size: 14px"
                        ></i>
                      </a>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  :prop="column.columnCode"
                  :key="i"
                  sortable
                  :width="column.columnCode == 'updateTime' ? '150' : 'auto'"
                  v-else-if="
                    (column.columnCode !== 'fileName' &&
                      column.visiable == '1') ||
                    column.visiable == 1
                  "
                  :label="column.columnName"
                  show-overflow-tooltip
                >
                </el-table-column>
              </template>
              <!-- <el-table-column label="操作" fixed="right" width="150">
                <template
                  slot-scope="scope"
                  v-if="scope.row.status != 'resolved'"
                >
                  <el-popover
                    placement="left"
                    width="180"
                    trigger="hover"
                    popper-class="applybatch-list-popover"
                  >
                    <div class="fxcol fxcc" style="margin: 10px 0">
                      <el-button
                        size="mini"
                        v-for="item in rightButton"
                        :key="item.ms_resource_id"
                        :type="item.type"
                        @click="handleClickMore(scope.row, item.method)"
                        :style="{
                          width: '135px',
                          margin:
                            item.ms_resource_id != '1' ? '10px 0 0 0' : '',
                        }"
                        >{{ item.name }}</el-button
                      >
                    </div>
                    <span slot="reference" style="cursor: pointer">更多</span>
                  </el-popover>
                </template>
              </el-table-column> -->
            </el-table>
            <div class="navigate-box">
              <div class="pagination">
                <el-pagination
                  background
                  @current-change="
                    (val) => {
                      this.handleCurrentChange(val, 'opreta');
                    }
                  "
                  :total="operatePrams.totalCount"
                  @size-change="
                    (val) => {
                      this.handleSizeChange(val, 'opreta');
                    }
                  "
                  :current-page.sync="operatePrams.pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="operatePrams.pageRows"
                  layout="total, sizes, prev, pager, next"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <!-- 表单区END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>
<script>
import haihangupload from "./haihang_upload";
export default {
  data() {
    return {
      // 筛选条件
      parampters: {
        //查询参数
        pageRows: 10, //每页行数
        pageIndex: 1, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
        status: "",
        cardApplyBatchId: "",
        applyBatchNo: "", //
        vopName: "",
        ispCode: "",
      },
      batchMobile: {
        //查询参数
        pageRows: 10, //每页行数
        pageIndex: 1, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
        cardApplyBatchId: "",
        produceMissionStatus: "",
      },
      operatePrams: {
        pageRows: 10, //每页行数
        pageIndex: 1, //当前页
        totalCount: 0, //总记录数
        operateId: "",
        fileType: "",
      },
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      firstLoadedData: "{}",
      // 表单校验规则
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "",
      // 表单只读状态
      readOnly: false,
      //字典集
      dicts: {
        dictionary: {},
      },
      tableLoading: true,
      tableData: [],
      operateFileTypeList: [],
      columnData: [],
      operateFileTableData: [],
      operateColunmnData: [],
      batchMobileTableData: [],
      batchMobilecolunmnData: [],
      spNo: "",
      canSelDnseg: false, //未选择省市时，不可以选择号段
      canChoseCity: false,
      cardNumTol: 0,
      ispList: [],
      rightButton: [
        //TODO:待开发功能模块
        {
          id: 4,
          tag: "cardApplyBatch_button_exportDetail",
          name: "重试导入mobile",
          method: "toRetryImport",
          type: "primary",
        },
      ],
    };
  },
  props: {
    sourceData: {
      required: true,
    },
  },
  // 进入页面加载数据
  mounted() {
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.parampters.cardApplyBatchId = this.sourceData.cardApplyBatchId;
      this.batchMobile.cardApplyBatchId = this.sourceData.cardApplyBatchId;
      this.parampters.applyBatchNo = this.sourceData.applyBatchNo;
      this.operatePrams.operateId = this.sourceData.cardApplyBatchId;
      this.actType = this.sourceData.actType;
      this.initSelectOptoins();
      this.loadOperateFileType();
      this.loadColumnData();
      this.loadmobileListColumnData();
      this.loadOperateColumnData();
      this.initFormData();
      this.loadmobileList();
      this.loadOperateFile();
    },

    /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      this.loadSelectOptoins("dictionary", { type: "mcaList" }, "mcaList");
      this.loadSelectOptoins(
        "dictionary",
        { type: "produceMissionStatus" },
        "produceMissionStatus"
      );
      this.loadSelectOptoins(
        "dictionary",
        { type: "operateFile" },
        "operateFile"
      );
    },

    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params, type) {
      let url = "/herp/" + dictKind + "/";
      this.$axios
        .get(url, {
          params: params,
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$set(this.dicts[dictKind], type, data.data.list);
            console.log(this.dicts);
          } else {
            this.$error("查询失败" + data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /**
     * 取消返回
     * @augments formName 表单名称
     */
    cnacelForm(formName) {
      this.$emit("ok", null);
    },

    /**
     * @augments val 页码
     * 切换页码操作
     */
    handleCurrentChange(val, type) {
      if (type == "opreta") {
        this.operatePrams.pageIndex = val;
        this.loadOperateFile();
      } else if (type == "batchMobileList") {
        this.batchMobile.pageIndex = val;
        this.loadmobileList();
      } else {
        // 修改每页显示条数
        this.parampters.pageIndex = val;
        // 重新获取数据
        this.initFormData();
      }
    },

    /**
     * @augments val 每页显示条数
     * 每页显示条数修改
     */
    handleSizeChange(val, type) {
      if (type == "opreta") {
        this.operatePrams.pageRows = val;
        this.loadOperateFile();
      } else if (type == "batchMobileList") {
        this.batchMobile.pageRows = val;
        this.loadmobileList();
      } else {
        // 修改每页显示条数
        this.parampters.pageRows = val;
        // 重新获取数据
        this.initFormData();
      }
    },

    /**
     *初始化加载表单数据
     */
    initFormData() {
      if (this.actType == "view") {
        // 查看状态 标识表单只读
        this.readOnly = true;
      }
      if (
        this.actType != null &&
        (this.actType == "upd" || this.actType == "view")
      ) {
        let url = `/herp/cardApplyBatch/${this.parampters.cardApplyBatchId}/mcaList/`;
        this.$axios
          .get(url, {
            params: this.parampters,
            headers: {
              operator: this.$util.getLoginer().userid,
              withCredentials: true,
            },
          })
          .then((res) => {
            let data = res.data;
            if (data.success) {
              this.tableData = data.data.list;
              this.tableLoading = false;
              this.parampters.pageIndex =
                data.data.pageNum != undefined
                  ? parseInt(data.data.pageNum)
                  : 0;
              this.parampters.pageCount =
                data.data.totalPage != undefined
                  ? parseInt(data.data.totalPage)
                  : 0;
              this.parampters.totalCount =
                data.data.count != undefined ? parseInt(data.data.count) : 0;
              if (
                this.tableData != null &&
                this.tableData != undefined &&
                this.tableData.length > 0
              ) {
                this.spNo = this.tableData[0].spNo;
              }
              // this.getCardNumTol();
            } else {
              this.tableLoading = false;
              this.$error(data.message);
            }
          })
          .catch((err) => {
            this.tableLoading = false;
            console.log(err);
          });
      }
    },

    initOpaData() {},
    clickToView(rowData, column, event) {
      this.toView(rowData);
    },

    toDel(row) {
      let url = "/herp/cardApplyBatch/" + this.selectedId + "/cardApplyDetail/";
      let formData = [];
      formData.push(row);
      this.$axios
        .delete(
          url,
          {
            data: formData,
          },
          {
            headers: {
              operator: this.$util.getLoginer().userid,
              withCredentials: true,
            },
          }
        )
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          this.fullscreenLoading = false;
          if (data.success) {
            this.$message({
              message: "删除记录成功.",
              type: "success",
            });
            this.initFormData();
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          this.fullscreenLoading = false;
        });
    },

    changeProvince(res) {
      if (res && res.length > 0) {
        let province = res[0];
        if (province.provinceCode != this.parampters.provinceCode) {
          this.$set(this.parampters, "provinceCode", province.provinceCode);
          this.$set(this.parampters, "provinceName", province.provinceName);
          this.$set(this.parampters, "cityCode", "");
          this.$set(this.parampters, "cityName", "");
        }
        this.canChoseCity = true;
      }
    },

    changeCity(res) {
      console.log("changeCity");
      if (res && res.length > 0) {
        let city = res[0];
        if (city.cityCode != this.parampters.cityCode) {
          this.$set(this.parampters, "cityName", city.cityName);
          this.$set(this.parampters, "cityCode", city.cityCode);
        }
        this.canSelDnseg = true;
      }
    },

    preSelDnesg() {
      if (!this.canSelDnseg) {
        this.$error("请先选择省市，后选择号段");
      } else {
        let params = {
          provinceCode: this.parampters.provinceCode,
          cityCode: this.parampters.cityCode,
        };
        this.loadSelectOptoins("dnseg", params);
      }
    },

    /**
     * v-selectpage 格式化参数数据
     */
    resultFormat(resp) {
      let data = resp.data;
      if (data.success) {
        return {
          totalRow: data.data ? data.data.count : 0,
          list: data.data ? data.data.list : [],
        };
      } else {
        return {
          totalRow: 0,
          list: [],
        };
      }
    },

    clearParameters(name) {
      if (name == "province") {
        this.$delete(this.parampters, "provinceCode");
        this.$delete(this.parampters, "provinceId");
        this.$delete(this.parampters, "provinceName");
        this.$delete(this.parampters, "cityCode");
        this.$delete(this.parampters, "cityName");
        this.canChoseCity = false;
      } else if (name == "city") {
        this.$delete(this.parampters, "cityCode");
        this.$delete(this.parampters, "cityName");
      }
    },

    getCardNumTol(tableData) {
      this.$axios
        .get("/herp/cardApplyDetail/" + this.selectedId + "/sumCardNum/", {
          params: this.parampters,
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.cardNumTol = data.data;
          }
        });
    },
    loadIsp() {
      this.$axios
        .get("/herp/isp/", {
          params: {
            pageIndex: this.parampters.pageIndex,
            pageRows: 50,
          },
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.ispList = data.data.list;
            console.log(this.ispList);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //重试导入制卡文件
    toRetryImport(row) {
      this.$axios
        .post(`/herp/haihang/${row.operateId}/reimport/`, null, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.loadOperateFile();
            this.$message({
              type: "success",
              message: data.message,
            });
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 点击右侧按钮
     */
    handleClickMore(row, method) {
      this[method](row);
    },
    /**
     * 加载资源管理表格的表头
     */
    loadColumnData() {
      this.$axios
        .get(`/herp/table/mcaPage/column/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.columnData = data.data;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 打开海航导入文件列表
     */
    importMobile() {
      //页面参数
      var pageParam = {
        seleid: this.parampters.cardApplyBatchId,
        actType: "upd",
        importType: "cardApplyBatchId",
      };
      let commDialog = this.$dialog.commDialog(
        "导入海航数据文件",
        haihangupload,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") {
          this.initFormData();
          this.loadOperateFile();
        } else if (resp.type == "cancel") {
        }
      });
    },
    /**
     * 日志文件管理表格数据
     */
    loadOperateFile() {
      this.$axios
        .get(`/herp/operateFile/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
          params: this.operatePrams,
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.operateFileTableData = data.data.list;
            this.operatePrams.totalCount = data.data.count;
            this.operatePrams.pageRows = data.data.pageSize;
            this.operatePrams.pageIndex = data.data.pageNum;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 手机号导入进度查询
     */
    loadmobileList() {
      this.$axios
        .get(
          `/herp/cardApplyBatch/${this.batchMobile.cardApplyBatchId}/batchMobileList/`,
          {
            headers: {
              operator: this.$util.getLoginer().userid,
              withCredentials: true,
            },
            params: this.batchMobile,
          }
        )
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.batchMobileTableData = data.data.list;
            this.batchMobile.totalCount = data.data.count;
            this.batchMobile.pageRows = data.data.pageSize;
            this.batchMobile.pageIndex = data.data.pageNum;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 加载日志文件的表格表头
     */
    loadOperateColumnData() {
      this.$axios
        .get(`/herp/table/operateFile/column/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.operateColunmnData = data.data;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 加载日志文件的表格表头
     */
    loadmobileListColumnData() {
      this.$axios
        .get(`/herp/table/batchMobileList/column/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.batchMobilecolunmnData = data.data;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //加载文件类型
    loadOperateFileType() {
      this.$axios
        .get("/herp/operateFileType/", {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.operateFileTypeList = data.data;
            console.log(this.operateFileType);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
